<template>
  <div class="register">
    <div class="closeBtn">
      <span @click="$router.back()" class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <div class="userName">
      <authInput
        type="text"
        placeholder="请输入手机号"
        rule="^\d{4,16}$"
        err_massage="请输入正确的手机号码"
        @input="setUserName"
      ></authInput>
    </div>
    <div class="nickName">
      <authInput
        type="text"
        placeholder="请输入昵称"
        rule="^\w{4,16}$"
        err_message="请输入正确昵称"
        @input="setNickName"
      ></authInput>
    </div>
    <div class="password">
      <authInput
        type="password"
        placeholder="请输入密码"
        rule="^\d{3,16}$"
        err_massage="请输入正确的密码"
        @input="setPassword"
      ></authInput>
    </div>
    <div class="btn">
      <div class="btn">
        <authBtn text="注册" @send="sendRegister"></authBtn>
      </div>
    </div>
  </div>
</template>

<script>
import authInput from '../components/authInput';
import authBtn from '../components/authBtn'
export default {
  components:{
        authInput:authInput,
        authBtn:authBtn
  },
  data (){
    return{
      username:'',
      nickname:'',
      password:'',
    }
  },
  methods:{
   setUserName(name){
     this.username=name;
   },
   setNickName(name){
     this.nickname=name
   },
   setPassword(pwd){
     this.password=pwd
   },
   sendRegister(){
    console.log('点击了注册按钮');
    
     this.$axios({
       url:'/register',
       method:'post',
       data:{
         username:this.username,
         nickname:this.nickname,
         password:this.password
       }
     }).then(res=>{
       console.log(res.data.statusCode);
       if(res.data.statusCode&&res.data.statusCode==400){
         this.$toast.fail(res.data.message)
       }else{
         this.$toast.success(res.data.message)
       }
       
     })
   }
  }
};
</script>

<style lang='less' scoped>
.register {
  padding: 20px;
}
.closeBtn {
  padding-top: 5.556vw;
  .iconfont {
    font-size: 7.5vw;
  }
}
.logo {
  display: flex;
  justify-content: center;
  .iconfont {
    font-size: 35vw;
    color: #d81e06;
  }
}
</style>